<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-01-24 17:31:30
 * @Description: 
-->
<template>
    <div class="body-container">
        <div class="body-main">
            <el-card class="side-container"
                :style="`height:${view.height - 60}px;width:${MenuStateStore.isCollapse ? 70 : 300}px`">
                <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="MenuStateStore.isCollapse"
                    router>
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <Connection />
                            </el-icon>
                            <span>渲染文件管理</span>
                        </template>
                        <el-menu-item index="/index/general/randerManage/randerList">渲染文件注册</el-menu-item>
                        <el-menu-item index="/index/general/randerManage/randerBinding">渲染文件绑定</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><icon-menu /></el-icon>
                            <span>算法注册管理</span>
                        </template>
                        <el-menu-item index="/index/general/algorithmManage/algorithmType">算法类型管理</el-menu-item>
                        <el-menu-item index="/index/general/algorithmManage/algorithmList">通用算法列表</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>算法流程管理</span>
                        </template>
                        <el-menu-item index="/index/general/processManage/processList">算法流程列表</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>任务管理</span>
                        </template>
                        <el-menu-item index="/index/general/executeManage/executeList">任务列表</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-card>
            <div class="body-warp" :style="`height:${view.height - 60}px;;background:${isDark ? '#202223' : '#E5E9F2'};`">
                <div class="breadcrumb-container">
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item v-for="item in route.matched">
                            {{ item.meta.title }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>

                </div>

                <div class="body-inner" :style="`background:${isDark ? '#1B1B1F' : '#fff'};`">
                    <el-row>
                        <el-col :span="24">
                            <router-view></router-view>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import { useDark, useToggle } from '@vueuse/core'
import {
    Sunny, Moon, UserFilled, Document,
    Menu as IconMenu, Menu, Fold,
    Location, Edit, Expand, ArrowRight,
    Setting, Connection,
} from '@element-plus/icons-vue'
import { useMenuStateStore } from "@/store/page";
import { useRoute } from 'vue-router'
import * as _ from "lodash";
const route = useRoute();
// import { ElMessage, ElMessageBox } from "element-plus";
let isDark = ref(useDark())
const activeIndex = ref(route.path)
const MenuStateStore = useMenuStateStore()
var view = reactive({
    height: window.innerHeight,
});
window.onresize = _.debounce(() => {
    view.height = window.innerHeight;
}, 100);
</script>
<style lang="scss" scoped>
.body-container {
    display: flex;
    justify-content: center;

    .body-main {
        width: 100%;
        min-width: 1482px;
        display: flex;

        .side-container {
            width: 300px;
            overflow: scroll;
        }

        .body-warp {
            width: 100%;
            padding: 0 30px;

            .breadcrumb-container {
                height: 60px;
                width: 100%;
                display: flex;
                align-items: center;
            }

            .body-inner {
                height: calc(100% - 60px);
                width: 100%;
            }
        }
    }
}
</style>
<style lang="scss"></style>